<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['销售管理', '销售合同']" currentMenu="合同详情"> </crumbs>
    <div class="page-scroll-wrap" style="padding-bottom: 80px">
      <div class="uni-card" id="navbar" style="overflow: hidden">
        <div class="bd-line"></div>
        <div class="item-wrap">
          <div class="detail-item">
            <p class="subtitle">合同编号</p>
            <p class="secondary-text">{{ detailInfo.contractCode || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">合同名称</p>
            <p class="secondary-text">{{ detailInfo.contractName || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">签订人</p>
            <p class="secondary-text">{{ detailInfo.signUserIdText || '-' }}</p>
          </div>
          <div class="detail-item" style="width: 10%; text-align: right">
            <!-- <div class="status-box">
              <img src="@/assets/img/icon_duihao.png" alt="">
              <p class="subtitle" style="margin-top:-44px">状态</p>
              <p class="secondary-text">{{ detailInfo.flowStatusText || '-' }}</p>
            </div> -->
            <flow-status
              ids="ERP_SALE_CONTRACT"
              :flowStatusText="detailInfo.flowStatusText"
              :formStatusText="detailInfo.statusText"
              :flowStatus="detailInfo.flowStatus"
            ></flow-status>
          </div>
          <div class="detail-item">
            <p class="subtitle">所属客户</p>
            <p class="secondary-text">{{ detailInfo.customerIdText || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">承诺交期</p>
            <p class="secondary-text">{{ detailInfo.promiseDate || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">合同金额（元）</p>
            <p class="secondary-text">{{ numFormat(detailInfo.amount) || '-' }}</p>
          </div>
          <div class="detail-item" style="width: 10%; text-align: right" />
          <div class="detail-item">
            <p class="subtitle">合同起始日期</p>
            <p class="secondary-text">{{ detailInfo.contractStartDate || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">合同终止日期</p>
            <p class="secondary-text">{{ detailInfo.contractEndDate || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">签订日期</p>
            <p class="secondary-text">{{ detailInfo.signDate || '-' }}</p>
          </div>
          <div class="detail-item" style="width: 10%; text-align: right" />
          <div class="detail-item" style="width: 100%">
            <p class="subtitle">合同原件</p>
            <file-detail :ids="detailInfo.attachment"></file-detail>
          </div>
          <div :class="headerFixed == true ? 'fixed-tab' : ''" id="fixedHeaderRoot" style="width: 100%">
            <a-tabs
              :activeKey="activeKey"
              @change="callback"
              style="width: 100%; margin-top: 24px; margin-bottom: -40px; margin-left: -16px"
            >
              <a-tab-pane key="1" tab="发货记录" />
              <!-- <a-tab-pane key="2" tab="开票记录" /> -->
              <a-tab-pane key="3" tab="收款记录" />
              <a-tab-pane key="4" tab="生产工单" />
              <a-tab-pane key="5" tab="申请" />
            </a-tabs>
          </div>
        </div>
      </div>
      <div class="cards-box" :style="{ marginTop: headerFixed == true ? '57px' : '' }">
        <!-- 发货记录---------------- begin ---------------- -->
        <div v-if="activeKey == 1">
          <div class="table-wrap">
            <a-table
              row-key="id"
              size="middle"
              :scroll="{ x: '100%' }"
              :hideDefaultSelections="false"
              :loading="shipPage.loading"
              :row-selection="{
                selectedRowKeys: selectedRowKeys,
                columnTitle: ' ',
                columnWidth: 35,
                onChange: onSelectChange,
                fixed: true,
              }"
              :columns="shipColumns"
              :dataSource="shipPage.dataSource"
              :pagination="false"
            >
              <span
                slot="goodsCode"
                :title="record.goodsCode + ' | ' + record.goodsName + ' | ' + `${record.spec || '-'}`"
                slot-scope="text, record"
                >{{ record.goodsCode + ' | ' + record.goodsName + ' | ' + `${record.spec || '-'}` }}</span
              >
              <span
                slot="num"
                slot-scope="text, record, index"
                :title="`${record.num || ''} ${record.basicUnit || ''}`"
              >
                <a-input
                  v-model="record.num"
                  @input="(e) => inputNum(e, index)"
                  @blur="(e) => blurNum(e, index)"
                  style="width: 100%"
                  placeholder="请输入"
                >
                  <div slot="suffix" style="background: #fff">
                    {{ record.basicUnit ? subStrText(record.basicUnit, 3) : '' }}
                  </div>
                </a-input>
              </span>
              <span slot="saleNum" :title="numFormat(text)" slot-scope="text, record"
                >{{ numFormat(text) }}{{ record.unit }}</span
              >
              <span slot="saleBasicNum" :title="numFormat(text)" slot-scope="text, record"
                >{{ numFormat(text) }}{{ record.basicUnit }}</span
              >
              <span slot="shippingNum" :title="numFormat(text)" slot-scope="text, record"
                >{{ numFormat(text) }}{{ record.unit }}</span
              >
              <span slot="issuedWarehouseNum" :title="numFormat(text)" slot-scope="text, record"
                >{{ numFormat(text) }}{{ record.unit }}</span
              >
              <span slot="applyShippedNum" :title="numFormat(text)" slot-scope="text, record"
                >{{ numFormat(text) }}{{ record.unit }}</span
              >
              <span slot="surplusApplyNum" :title="numFormat(text)" slot-scope="text, record"
                >{{ numFormat(text) }}{{ record.unit }}</span
              >
            </a-table>
          </div>
          <!-- 全选/分页 -->
          <div
            class="uni-card"
            :style="{
              position: 'fixed',
              bottom: 0,
              right: 0,
              zIndex: 2,
              width: '100%',
              background: '#fff',
            }"
          >
            <div style="display: inline-block">
              <a-checkbox :indeterminate="listIndeterminate" :checked="listCheckAll" @change="onCheckAllChange">
              </a-checkbox>
              <!-- <span class='btn-text' style="margin:0 24px" @click="batchAction">申请发货</span> -->
              <a-button type="link" :disabled="detailInfo.status != 'effective'" @click="batchAction"
                >申请发货</a-button
              >
              <span style="margin-left: 8px">
                {{ `已选 ${selectedRowKeys.length}/${shipPage.totleList.length || 0} 项` }}
                <span class="btn-text" @click="clearArr" style="margin: 0 10px">清空</span>
              </span>
            </div>
            <div style="display: inline-block; float: right">
              <a-pagination
                :total="shipPage.totleList.length || 0"
                v-model="shipPage.current"
                :page-size-options="shipPage.pageSizeOptions"
                :page-size="shipPage.pageSize"
                @change="onChangePage"
                @showSizeChange="onChangePage"
                show-quick-jumper
                show-size-changer
              />
            </div>
          </div>
          <div style="padding: 12px">
            <Examine
              ids="ERP_SALE_CONTRACT"
              v-if="detailInfo.flowInstId"
              type="2"
              :id="detailInfo.flowInstId"
              ref="examine"
            />
          </div>
        </div>
        <!-- 发货记录---------------- end ---------------- -->

        <!-- 开票记录---------------- begin ---------------- -->
        <div v-if="activeKey == 2" class="tab-wrap">2222222222222222222222</div>
        <!-- 开票记录---------------- end ---------------- -->

        <!-- 收款记录---------------- begin ---------------- -->
        <div v-show="activeKey == 3" style="margin: 0 12px">
          <div class="tab-nav">
            <div class="tab-nav-item">
              <p class="secondary-text">总应收</p>
              <p class="subtitle">￥{{ numFormat(detailInfo.amount) }}</p>
            </div>
            <div class="bd-line"></div>
            <div class="tab-nav-item">
              <p class="secondary-text">已收</p>
              <p class="subtitle">￥{{ numFormat(detailInfo.collectionAmount) }}</p>
            </div>
            <div class="bd-line"></div>
            <div class="tab-nav-item">
              <p class="secondary-text">待收</p>
              <p class="subtitle">￥{{ numFormat(detailInfo.pendingCollectionAmount) }}</p>
            </div>
          </div>
          <div class="col-table">
            <a-table
              row-key="id"
              size="middle"
              :scroll="{ x: '100%', y: 'calc(100vh - 636px)' }"
              :hideDefaultSelections="false"
              :columns="collectionColumns"
              :dataSource="collectionList"
              :pagination="false"
              :key="colectionIndex"
            >
              <span slot="paybackAmount" slot-scope="record">
                {{ numFormat(record) }}
              </span>
              <span slot="actions" slot-scope="text, record">
                <a @click="deleteRecord(record)">删除</a>
              </span>
              <div slot="attachment" slot-scope="record" style="cursor: pointer; display: flex; align-items: center">
                <image-preview :ids="record"></image-preview>
              </div>
            </a-table>
          </div>
          <div style="padding-top: 12px">
            <Examine
              ids="ERP_SALE_CONTRACT"
              v-if="detailInfo.flowInstId"
              type="2"
              :id="detailInfo.flowInstId"
              ref="examine"
            />
          </div>
        </div>
        <!-- 收款记录---------------- end ---------------- -->

        <!-- 生产工单---------------- begin ---------------- -->
        <div v-if="activeKey == 4">
          <div class="table-wrap">
            <a-table
              row-key="id"
              size="middle"
              :scroll="{ x: '100%' }"
              :hideDefaultSelections="false"
              :loading="orderPage.loading"
              :columns="orderColumns"
              :dataSource="orderPage.dataSource"
              :pagination="false"
            >
              <!-- 输入框搜索 -->
              <!-- <div slot="searchInput" slot-scope="{ column }" class="searchWorkOreder">
                <a-input
                  placeholder="请输入"
                  v-model="orderFilterForm[column.dataIndex]"
                  style="width: 188px; display: block"
                  @pressEnter="filterOrderData"
                />
                <a-button
                  type="primary"
                  style="width: 80px; margin-left: 20px; display: block"
                  @click="filterOrderData"
                >
                  搜索
                </a-button>
              </div>
              <a-icon
                slot="searchIcon"
                slot-scope="filtered"
                type="search"
                :style="{ color: filtered ? '#108ee9' : undefined }"
              /> -->
              <div
                slot="orderCode"
                @click="openDetail(record)"
                slot-scope="text, record"
                class="btn-text"
                :title="text"
              >
                {{ text }}
              </div>
              <div
                class="ant-table-row-cell-ellipsis"
                slot="num"
                :title="`${numFormat(record.num)}`"
                slot-scope="text, record"
              >
                {{ `${numFormat(record.num)}` }}
              </div>
              <!-- ${record.goodsBasicUnitText} -->
              <div
                class="ant-table-row-cell-ellipsis"
                slot="producedNum"
                :title="`${numFormat(record.producedNum)}`"
                slot-scope="text, record"
              >
                {{ `${numFormat(record.producedNum)}` }}
              </div>
              <div slot="statusName" slot-scope="text, record" :title="text">
                <span v-if="record.status == 'notStarted'" style="color: #ff943e" :title="record.statusName || '-'">{{
                  record.statusName || '-'
                }}</span>
                <span v-if="record.status == 'inProduction'" style="color: #1890ff" :title="record.statusName || '-'">{{
                  record.statusName || '-'
                }}</span>
                <span v-if="record.status == 'completed'" style="color: #00b042" :title="record.statusName || '-'">{{
                  record.statusName || '-'
                }}</span>
                <span v-if="record.status == 'abolished'" style="color: #888888" :title="record.statusName || '-'">{{
                  record.statusName || '-'
                }}</span>
              </div>
            </a-table>
          </div>
          <!-- 全选/分页 -->
          <div
            class="uni-card"
            :style="{
              position: 'fixed',
              bottom: 0,
              right: 0,
              zIndex: 2,
              width: '100%',
              background: '#fff',
              paddingLeft: '43px',
            }"
          >
            <div style="display: inline-block">
              <span style="margin-left: 8px">
                {{ `共 ${orderPage.total} 条` }}
              </span>
            </div>
            <div style="display: inline-block; float: right">
              <a-pagination
                :total="orderPage.total"
                v-model="orderPage.current"
                :page-size-options="orderPage.pageSizeOptions"
                :page-size="orderPage.pageSize"
                @change="onChangeOrderPage"
                @showSizeChange="onChangeOrderPage"
                show-quick-jumper
                show-size-changer
              />
            </div>
          </div>
          <div style="padding: 12px">
            <Examine
              ids="ERP_SALE_CONTRACT"
              v-if="detailInfo.flowInstId"
              type="2"
              :id="detailInfo.flowInstId"
              ref="examine"
            />
          </div>
        </div>
        <!-- 生产工单---------------- end ---------------- -->

        <!-- 申请---------------- begin ---------------- -->
        <div v-if="activeKey == 5">
          <div class="table-wrap">
            <a-table
              row-key="id"
              size="middle"
              :scroll="{ x: '100%' }"
              :hideDefaultSelections="false"
              :loading="applyPage.loading"
              :columns="applyColumns"
              :dataSource="applyPage.dataSource"
              :pagination="false"
            >
            </a-table>
          </div>
          <!-- 全选/分页 -->
          <div
            class="uni-card"
            :style="{
              position: 'fixed',
              bottom: 0,
              right: 0,
              zIndex: 2,
              width: '100%',
              background: '#fff',
              paddingLeft: '43px',
            }"
          >
            <div style="display: inline-block">
              <span style="margin-left: 8px">
                {{ `共 ${applyPage.totleList.length} 条` }}
              </span>
            </div>
            <div style="display: inline-block; float: right">
              <a-pagination
                :total="applyPage.totleList.length"
                v-model="applyPage.current"
                :page-size-options="applyPage.pageSizeOptions"
                :page-size="applyPage.pageSize"
                @change="onChangeApplyPage"
                @showSizeChange="onChangeApplyPage"
                show-quick-jumper
                show-size-changer
              />
            </div>
          </div>
          <div style="padding: 12px">
            <Examine v-if="detailInfo.flowInstId" type="2" :id="detailInfo.flowInstId" ref="examine" />
          </div>
        </div>
        <!-- 申请---------------- end ---------------- -->
      </div>
      <applyDeliver ref="applyDeliver"></applyDeliver>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import FlowStatus from '@/pubComponent/FlowStatus'
import Examine from '@/components/examine'
import { API } from '@/api/requestFzs'
import { fourFloatNum, numFormat, subStrText } from '@/utils/util'
import ImagePreview from '@/components/fileActions/ImagePreview'
import { mapState } from 'vuex'
//@param condition 过滤条件
//@param data 需要过滤的数据
let filterTableData = (condition, data) => {
  return data.filter((item) => {
    return Object.keys(condition).every((key) => {
      return String(item[key]).toLowerCase().includes(String(condition[key]).trim().toLowerCase())
    })
  })
}
export default {
  data() {
    const shipColumns = [
      {
        title: '商品编号 | 商品名称 | 规格',
        dataIndex: 'goodsCode',
        width: 200,
        ellipsis: true,
        scopedSlots: { customRender: 'goodsCode' },
      },
      {
        title: '订购数量',
        dataIndex: 'saleNum',
        width: 120,
        ellipsis: true,
        scopedSlots: { customRender: 'saleNum' },
      },
      {
        title: '订购基本单位数量',
        dataIndex: 'saleBasicNum',
        width: 140,
        ellipsis: true,
        scopedSlots: { customRender: 'saleBasicNum' },
      },
      {
        title: '已申请发货数量',
        dataIndex: 'shippingNum',
        width: 120,
        ellipsis: true,
        scopedSlots: { customRender: 'shippingNum' },
      },
      {
        title: '仓库实发数量',
        width: 120,
        ellipsis: true,
        dataIndex: 'issuedWarehouseNum',
        scopedSlots: { customRender: 'issuedWarehouseNum' },
      },
      {
        title: '已申请待发',
        width: 120,
        ellipsis: true,
        dataIndex: 'applyShippedNum',
        scopedSlots: { customRender: 'applyShippedNum' },
      },
      {
        title: '剩余应申请',
        width: 120,
        ellipsis: true,
        dataIndex: 'surplusApplyNum',
        scopedSlots: { customRender: 'surplusApplyNum' },
      },
      {
        title: '本次申请发货基本单位数量',
        fixed: 'right',
        width: 200,
        ellipsis: true,
        dataIndex: 'num',
        scopedSlots: { customRender: 'num' },
      },
    ]
    const collectionColumns = [
      {
        title: '收款金额',
        dataIndex: 'paybackAmount',
        width: 150,
        ellipsis: true,
        scopedSlots: { customRender: 'paybackAmount' },
      },
      {
        title: '登记人',
        dataIndex: 'registerName',
        width: 100,
        ellipsis: true,
      },
      {
        title: '登记时间',
        dataIndex: 'registerTime',
        width: 188,
        ellipsis: true,
      },
      {
        title: '收款账户',
        dataIndex: 'paybackAccount',
        width: 188,
        ellipsis: true,
        scopedSlots: { customRender: 'paybackAccount' },
      },
      {
        title: '收款人',
        dataIndex: 'paybackUserName',
        width: 100,
        ellipsis: true,
        scopedSlots: { customRender: 'paybackUserName' },
      },
      {
        title: '收款时间',
        dataIndex: 'paybackDate',
        width: 188,
        ellipsis: true,
      },
      {
        title: '收款凭证',
        dataIndex: 'attachment',
        width: 150,
        ellipsis: true,
        scopedSlots: { customRender: 'attachment' },
      },
      {
        fixed: 'right',
        title: '操作',
        width: 50,
        dataIndex: 'actions',
        ellipsis: true,
        scopedSlots: { customRender: 'actions' },
      },
    ]
    const orderColumns = [
      {
        title: '工单编号',
        dataIndex: 'orderCode',
        ellipsis: true,
        // sortDirections: ['descend', 'ascend'],
        // sorter: (a, b) => String(a.code).localeCompare(String(b.code)),
        width: 180,
        scopedSlots: {
          filterDropdown: 'searchInput',
          filterIcon: 'searchIcon',
          customRender: 'orderCode',
        },
      },
      {
        title: '产品编号',
        dataIndex: 'goodsCode',
        width: 180,
        ellipsis: true,
        scopedSlots: { customRender: 'goodsCode' },
        scopedSlots: {
          filterDropdown: 'searchInput',
          filterIcon: 'searchIcon',
          customRender: 'goodsCode',
        },
      },
      {
        title: '产品名称',
        dataIndex: 'goodsName',
        width: 180,
        ellipsis: true,
        scopedSlots: {
          filterDropdown: 'searchInput',
          filterIcon: 'searchIcon',
          customRender: 'goodsName',
        },
      },
      {
        title: '规格',
        dataIndex: 'goodsSpec',
        ellipsis: true,
        width: 120,
        scopedSlots: {
          filterDropdown: 'searchInput',
          filterIcon: 'searchIcon',
          customRender: 'goodsSpec',
        },
      },
      {
        title: '基本单位',
        dataIndex: 'goodsBasicUnitText',
        ellipsis: true,
        width: 90,
        scopedSlots: { customRender: 'goodsBasicUnitText' },
      },
      {
        title: '计划生产数量',
        dataIndex: 'num',
        ellipsis: true,
        width: 120,
        // defaultSortOrder: 'descend',
        // sorter: (a, b) => a.num - b.num,
        scopedSlots: { customRender: 'num' },
      },
      {
        title: '计划开始时间',
        dataIndex: 'planStartTime',
        ellipsis: true,
        width: 180,
        scopedSlots: { customRender: 'planStartTime' },
      },
      {
        title: '计划完成时间',
        dataIndex: 'planEndTime',
        ellipsis: true,
        width: 180,
        scopedSlots: { customRender: 'planEndTime' },
      },
      {
        title: '生产状态',
        dataIndex: 'statusName',
        ellipsis: true,
        width: 110,
        scopedSlots: {
          filterDropdown: 'selectDropdown',
          filterIcon: 'selectIcon',
          customRender: 'statusName',
        },
      },
      {
        title: '已生产数量',
        dataIndex: 'producedNum',
        ellipsis: true,
        width: 120,
        scopedSlots: { customRender: 'producedNum' },
      },
    ]
    const applyColumns = [
      {
        title: '申请单号',
        dataIndex: 'applyNo',
        ellipsis: true,
        scopedSlots: { customRender: 'applyNo' },
      },
      {
        title: '申请标题',
        dataIndex: 'applyTitle',
        ellipsis: true,
      },
      {
        title: '申请类型',
        dataIndex: 'applyType',
        ellipsis: true,
      },
      {
        title: '申请时间',
        dataIndex: 'createTime',
        ellipsis: true,
      },
      {
        title: '申请状态',
        dataIndex: 'flowStatusText',
        ellipsis: true,
        scopedSlots: { customRender: 'flowStatusText' },
      },
    ]
    return {
      jkeForm: {
        title: '合同详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      subStrText,
      numFormat,
      detailInfo: {},
      activeKey: '1',
      selectedRowKeys: [],
      listIndeterminate: false,
      listCheckAll: false,
      shipColumns: shipColumns, // 发货记录columns
      collectionColumns: collectionColumns, // 收款记录columns
      orderColumns: orderColumns, // 生产工单columns
      orderFilterForm: {}, // 生产工单筛选表单
      applyColumns: applyColumns, // 申请columns
      collectionList: [],
      shipPage: {
        // 发货记录table分页配置
        loading: false,
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        dataSource: [], // 当前页数据
        totleList: [], // 总数据
      },
      orderPage: {
        // 生产订单进度table分页配置
        loading: false,
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        dataSource: [], // 当前页数据
        totleList: [], // 总数据
      },
      applyPage: {
        // 申请table分页配置
        loading: false,
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        dataSource: [], // 当前页数据
        totleList: [], // 总数据
      },
      navHeight: 0,
      headerFixed: false,
      queryId: '',
      colectionIndex: 1.3,
    }
  },
  components: {
    crumbs,
    FileDetail,
    FlowStatus,
    Examine,
    ImagePreview,
    applyDeliver: (resolve) => require(['@/views/apply/applyDeliver'], resolve),
  },
  mounted() {
    this.headerFixed = false
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed() {
    //组件销毁时解除监听
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    openDetail(row) {
      let obj = JSON.stringify({ id: this.queryId })
      this.$openWay(this, true, '/workOrderDetail', {
        id: row.id,
        from: '/salesManagement/salesContractDetail',
        back: obj,
      })
    },
    handleScroll() {
      // let offsetTop = this.$el.querySelector('#fixedHeaderRoot').getBoundingClientRect().top
      // this.headerFixed = offsetTop < 44 ? true : false
    },
    // 生产工单列表筛选
    filterOrderData() {
      this.orderPage.dataSource = filterTableData(this.orderFilterForm, this.orderPage.dataSource)
    },
    deleteRecord(v) {
      // 删除收款记录
      let that = this
      that.$antdConfirm({
        title: '确定删除吗？',
        content: '删除后不可恢复',
        onOk() {
          API.saleContractPaybackDelete({ id: v.id }).then((res) => {
            if (res.code == 200) {
              that.$antdMessage.success('删除成功！')
              that.getDetail()
            } else {
              that.$error({
                title: `${res.message}`,
                content: '删除失败！',
              })
            }
          })
        },
        onCancel() {},
      })
    },
    /* 本次申请发货-输入限制 */
    inputNum(e, i) {
      let nums = fourFloatNum(this.shipPage.dataSource[i].num)
      this.shipPage.dataSource[i].num = nums
      for (let j = 0; j < this.shipPage.totleList.length; j++) {
        const element = this.shipPage.totleList[j]
        if (element.id == this.shipPage.dataSource[i].id) {
          this.shipPage.totleList[j].num = nums
        }
      }
    },
    blurNum(e, i) {
      let snum = this.shipPage.dataSource[i].num ? Number(this.shipPage.dataSource[i].num) : 0
      let bnum = this.shipPage.dataSource[i].surplusApplyNum ? Number(this.shipPage.dataSource[i].surplusApplyNum) : 0
      let rate = Number(this.shipPage.dataSource[i].conversionRate) || 0
      if (e.target.value == '0') {
        this.shipPage.dataSource[i].num = ''
        for (let j = 0; j < this.shipPage.totleList.length; j++) {
          const element = this.shipPage.totleList[j]
          if (element.id == this.shipPage.dataSource[i].id) {
            this.shipPage.totleList[j].num = ''
          }
        }
        this.$antdMessage.error('本次申请发货数量必须大于0')
      } else if (snum > bnum * rate) {
        this.shipPage.dataSource[i].num = ''
        for (let j = 0; j < this.shipPage.totleList.length; j++) {
          const element = this.shipPage.totleList[j]
          if (element.id == this.shipPage.dataSource[i].id) {
            this.shipPage.totleList[j].num = ''
          }
        }
        this.$antdMessage.error('操作失败，本次申请发货数量不能大于剩余应申请数量')
      }
    },
    /* 批量操作 */
    batchAction() {
      if (this.selectedRowKeys.length == 0) {
        this.$antdMessage.info('请先选择数据')
        return
      }
      let newArr = []
      for (let i = 0; i < this.shipPage.totleList.length; i++) {
        const ship = this.shipPage.totleList[i]
        for (let j = 0; j < this.selectedRowKeys.length; j++) {
          const sele = this.selectedRowKeys[j]
          if (ship.id == sele) {
            newArr.push(ship)
            if (!ship.num) {
              this.$antdMessage.error(`第${i + 1}条本次申请发货必填`)
              return
            }
          }
        }
      }
      let dealGoods = {
        contractName: this.detailInfo.contractName,
        contractId: this.detailInfo.id,
        customerIdText: this.detailInfo.customerIdText,
        customerId: this.detailInfo.customerId,
        promiseDate: this.detailInfo.promiseDate,
        goods: newArr,
      }
      dealGoods = JSON.stringify(dealGoods)
      this.$refs.applyDeliver.initForm({ dealGoods })
      // this.$openWay(this, true, '/apply/applyDeliver', { dealGoods })
    },
    /* 列表选择 */
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
      this.checkBoxStatus()
    },
    // 全选
    onCheckAllChange(e) {
      if (e.target.checked) {
        for (let item of this.shipPage.dataSource) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            console.log('each != item.id:', each != item.id)
            return each != item.id
          })
          this.selectedRowKeys.push(item.id)
        }
      } else {
        for (let item of this.shipPage.dataSource) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            console.log('each != item.id:', each != item.id)
            return each != item.id
          })
        }
      }
      this.checkBoxStatus()
    },
    /* 清除 */
    clearArr() {
      this.selectedRowKeys = []
      this.checkBoxStatus()
    },
    // 发货记录分页
    onChangePage(current, pageSize) {
      this.handleChangePage(current, pageSize, 'shipPage')
    },
    // 生产订单进度分页
    onChangeOrderPage(current, pageSize) {
      this.orderPage.current = current
      this.orderPage.pageSize = pageSize
      this.getOrderList()
    },
    // 申请分页
    onChangeApplyPage(current, pageSize) {
      this.handleChangePage(current, pageSize, 'applyPage')
    },
    // 分页公用方法
    handleChangePage(current, pageSize, key) {
      this[key].current = current
      this[key].pageSize = pageSize
      let cur = 0
      let siz = pageSize * current
      if (current == 1) {
        cur = 0
      } else {
        cur = (current - 1) * pageSize
      }
      // console.log(this[key].handleList, 'this.shipPage.shipPage', cur, siz)
      this[key].loading = true
      setTimeout(() => {
        this[key].dataSource = this[key].totleList.slice(cur, siz)
        console.log(cur, siz)
        this[key].loading = false
      }, 300)
    },
    checkBoxStatus() {
      if (this.selectedRowKeys.length == 0) {
        this.listIndeterminate = false
        this.listCheckAll = false
      } else {
        let tableIds = []
        for (let item of this.shipPage.dataSource) {
          tableIds.push(item.id)
        }
        let checkValue = this.isInclude(tableIds, this.selectedRowKeys)
        if (checkValue) {
          this.listIndeterminate = false
          this.listCheckAll = true
        } else {
          this.listIndeterminate = true
          this.listCheckAll = false
        }
      }
    },
    isInclude(aa, bb) {
      return aa.every((item) => {
        return bb.some((sub) => {
          return sub === item
        })
      })
    },
    /* 切tab */
    callback(i) {
      this.activeKey = i
      if (i == 3) {
        this.getDetail()
      } else if (i == 4) {
        this.getOrderList()
      } else if (i == 2) {
        this.colectionIndex += 1
      }
    },
    getOrderList() {
      let obj = {
        relevanceSaleContractId: this.queryId,
        pageNo: this.orderPage.current,
        pageSize: this.orderPage.pageSize,
      }
      this.orderPage.loading = true
      API.queryNoPermissionPageList(obj).then((res) => {
        if (res.result) {
          this.orderPage.total = res.result.total || 0
          this.orderPage.dataSource = res.result.records
        }
        this.orderPage.loading = false
      })
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    initDetail(id) {
      this.jkeForm.visible = true
      this.queryId = id
      this.getDetail()
    },
    getDetail() {
      let id = this.queryId
      API.erpSaleContractQueryById({ orderSid: id }).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result
          let shapList = res.result.erpShippingApplyItemDealVoList
          for (let i = 0; i < shapList.length; i++) {
            shapList[i].id = i
          }
          this.shipPage.totleList = shapList
          this.shipPage.dataSource = shapList.slice(0, 30)
          this.applyPage.totleList = res.result.erpApplyLogVoList
          this.applyPage.dataSource = res.result.erpApplyLogVoList.slice(0, 30)
          let list = this.detailInfo.attachment.split(',')
          this.navHeight = list.length * 22
        }
      })
      this.getPayBack()
    },
    getPayBack() {
      let id = this.queryId
      API.pageQueryPaybackByContractId({ contractId: id, pageSize: 999, pageNo: 1 }).then((res) => {
        this.collectionList = res.result.records
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.fixed-tab {
  /deep/.ant-tabs-top {
    position: fixed;
    top: 40px; //自己根据需求设定
    z-index: 999;
    left: 0;
    width: 100% !important;
    .ant-tabs-bar {
      padding-left: 14px;
      background: #fff;
    }
  }
}
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.detail-item:nth-of-type(n + 5) {
  margin-top: 40px;
}

.detail-item {
  width: 30%;
}

.uni-card {
  padding: 24px 40px;
  background: #fff;
}

.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}

.cards-box {
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 12px 0;
  margin: 0 -12px 0;
  min-height: calc(100vh - 200px);
}

.tab-wrap {
  height: 100%;
  background: #fff;
}

.table-wrap {
  background: #fff;
  padding: 24px;
  margin: 0 12px;
}

.tab-nav {
  height: 110px;
  padding: 32px 24px;
  margin-bottom: 12px;
  background: #fff;
  display: flex;
  justify-content: space-between;

  .tab-nav-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    width: 33%;
  }

  .bd-line {
    height: 100%;
    width: 1px;
    background: #eeeeee;
    margin: 0 40px;
  }
}

.col-table {
  height: calc(100% - 120px);
  background: #fff;
  padding: 24px;
}

.status-box {
  width: 100%;
  height: 42px;
  position: relative;

  img {
    width: 86px;
    height: 86px;
    margin-top: -44px;
  }
}
</style>
